import {CCard} from '@/components/card'
import CheckShareDevModalForm from '@/components/form/checkShareDevModalForm'
import ShareDevModalForm from '@/components/form/shareDevModalForm'
import {DeviceStatusOfStatus, IconImg, ParamOfStatus} from '@/components/image'
import {CFormModal, ChangeVisible} from '@/components/modal'
import RollerDigital from '@/components/rollerDigital'
import {SplitLine} from '@/components/splitLine'
import {CnBoldP, CnBoldSpan, CnMediumSpan, CnNormalSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import {toSingleDevParams} from '@/libs/pageRedirect'
import {paramStatus2Color, ratio2color} from '@/libs/text2Color'
import {PropType} from 'vue'

const ConfigInofItem = defineComponent({
  props: {
    btnText: String,
    title: String,
    onClick: Function
  },
  setup(props, ctx) {
    return () => (
      <div class='h-30 flex justify-between items-center'>
        <div>
          <IconImg imgName='standard-sm' class='inline-block mr-10 w-18 h-18'></IconImg>
          <CnNormalSpan class='text-12'>{props.title || ''}</CnNormalSpan>
        </div>
        <a-button class='bg-primaryLight h-28' onClick={() => props.onClick && props.onClick()}>
          <CnNormalSpan class='text-primaryHalf cursor-pointer text-12'>
            {props.btnText || ''}
          </CnNormalSpan>
        </a-button>
      </div>
    )
  }
})

export const ShareDeviceCard = defineComponent({
  props: {
    shareDetail: {
      type: Object as PropType<DeviceShare.ShareDetail>,
      required: true
    }
  },
  emits: {
    finish: (): boolean => true
  },
  setup(props, {emit}) {
    const state = reactive<{
      shareModalVisible: boolean
      checkShareModelVisible: boolean
    }>({
      shareModalVisible: false,
      checkShareModelVisible: false
    })

    const shareUserJoin = computed(() => props.shareDetail.shareUserPack.shareNameList.join(','))

    function openShareModal() {
      state.shareModalVisible = true
    }

    function openCheckShareModal() {
      state.checkShareModelVisible = true
    }

    return () => (
      <CCard
        vein={true}
        class='h-456 col-span-1 w-full rounded-4 bg-white overflow-hidden flex flex-col px-0 pb-0'
        title={props.shareDetail.devName || '无设备名称'}
        v-slots={{
          title: () => (
            <div class='w-full h-full flex justify-between items-center pr-20'>
              <div class='flex-1 overflow-hidden'>
                <CnBoldP>{props.shareDetail.devName}</CnBoldP>
              </div>
              <DeviceStatusOfStatus status={props.shareDetail.devStatusCode}>
                <CnBoldSpan class='text-16'>{props.shareDetail.devStatus || '无状态'}</CnBoldSpan>
              </DeviceStatusOfStatus>
            </div>
          )
        }}
      >
        <div class='h-full overflow-y-auto pb-52 px-20'>
          {/* 水质分析 */}
          <div class='w-full min-h-64 flex gap-x-24 items-center mt-16'>
            <WaterTarget
              id={'deviceTarget' + (props.shareDetail.devId || Math.random())}
              radius={20}
              range={((props.shareDetail.nowStandRatio || 0) / 100) * 360}
              borderColor={ratio2color(props.shareDetail.nowStandRatio || 0)}
              showDashed={false}
              borderWidth={2}
            >
              <RollerDigital
                class='text-15'
                style={{
                  color: ratio2color(props.shareDetail.nowStandRatio || 0)
                }}
                endVal={props.shareDetail.nowStandRatio}
                bold={false}
              ></RollerDigital>
            </WaterTarget>
            <div class='flex-1 overflow-hidden px-12'>
              <CnBoldSpan
                style={{
                  color: paramStatus2Color(props.shareDetail.checkResult)
                }}
              >
                {props.shareDetail.checkResult}
              </CnBoldSpan>
              <div class=''>
                {props.shareDetail.paramList.map((param, idx) => (
                  <ParamOfStatus
                    class={[idx !== props.shareDetail.paramList.length - 1 ? 'mr-16' : '']}
                    status={param.paramStatus || ''}
                  >
                    {param.paramName}
                  </ParamOfStatus>
                ))}
              </div>
            </div>
            <div class='h-full flex items-center'>
              <a-button
                class='bg-primaryLight text-primary h-28'
                onClick={() =>
                  toSingleDevParams({devId: props.shareDetail.devId || 'xxxxxxxxxxxx'})
                }
              >
                <CnNormalSpan class='text-12 text-primary'>查看水质</CnNormalSpan>
              </a-button>
            </div>
          </div>

          {/* 配置信息 */}
          <div>
            <div class='w-full h-64 flex items-center gap-x-16'>
              <WaterTarget
                id={'deviceConfigInfo-' + (props.shareDetail.devId || Math.random())}
                radius={20}
                range={((props.shareDetail.onlineTimeRatio || 0) / 100) * 360}
                borderColor={ratio2color(props.shareDetail.onlineTimeRatio || 0)}
                showDashed={false}
                borderWidth={2}
                dashWidth={2}
              >
                <RollerDigital
                  class='text-15'
                  endVal={props.shareDetail.onlineTimeRatio}
                  style={{
                    color: ratio2color(props.shareDetail.onlineTimeRatio || 0)
                  }}
                  bold={false}
                ></RollerDigital>
              </WaterTarget>
              <CnBoldSpan class='ml-12'>
                {props.shareDetail.devOnlineStatus || '无设备状态'}
              </CnBoldSpan>
            </div>
            <div class='pl-52'>
              <ConfigInofItem
                title={`标准设置` + (props.shareDetail.standSetStatus || '未配置')}
                btnText='设置标准'
              ></ConfigInofItem>
              <ConfigInofItem
                title={`数据采集` + (props.shareDetail.dataSetStatus || '未配置')}
                btnText='设置采集'
              ></ConfigInofItem>
              <ConfigInofItem
                title={`报警设置` + (props.shareDetail.standSetStatus || '未配置')}
                btnText='设置报警'
              ></ConfigInofItem>
            </div>
          </div>

          {/* 底部信息 包含异常信息 分享信息 位置信息 */}
          <div class='w-full mt-20'>
            <div class='h-20 flex justify-end items-center mb-12'>
              <CnNormalSpan class='h-full text-12 mr-10'>
                本周报警
                {/* <CnNormalSpan class='h-full text-warning mx-6'>{props.shareDetail.totalExceptionCount}</CnNormalSpan> */}
                <RollerDigital
                  class='h-full text-14 text-warning mx-6'
                  endVal={props.shareDetail.totalExceptionCount || 0}
                  bold={false}
                ></RollerDigital>
                次
              </CnNormalSpan>
              <div class='inline-block w-1 h-full bg-splitLine'></div>
              <CnNormalSpan class='h-full text-12 mx-10'>
                设备故障
                {/* <CnNormalSpan class='h-full text-warning mx-6'>{props.shareDetail.devExceptionCount || 0}</CnNormalSpan> */}
                <RollerDigital
                  class='h-full text-14 text-warning mx-6'
                  endVal={props.shareDetail.devExceptionCount || 0}
                  bold={false}
                ></RollerDigital>
                次
              </CnNormalSpan>
              <div class='inline-block w-1 h-full bg-splitLine'></div>
              <CnNormalSpan class='h-full text-12 ml-10'>
                水质异常
                {/* <CnNormalSpan class='h-full text-warning mx-6'>{props.shareDetail.paramExceptionCount || 0}</CnNormalSpan> */}
                <RollerDigital
                  class='h-full text-14 text-warning mx-6'
                  endVal={props.shareDetail.paramExceptionCount || 0}
                  bold={false}
                ></RollerDigital>
                次
              </CnNormalSpan>
            </div>
            <div class='w-full h-18 flex justify-end mb-8 gap-x-16'>
              <CnNormalSpan class='inline-block w-71 text-12'>
                已分享
                <CnNormalSpan class='text-text mx-4'>
                  {props.shareDetail.shareUserPack.shareCount || 0}
                </CnNormalSpan>
                人
              </CnNormalSpan>
              <a-tooltip placement='top' title={shareUserJoin.value}>
                <CnNormalSpan
                  class='text-12'
                  style={{
                    maxWidth: 'calc(100% - 87px)'
                  }}
                >
                  {shareUserJoin.value}
                </CnNormalSpan>
              </a-tooltip>
            </div>
            <div class='h-18 flex justify-end space-x-16 mb-0'>
              <CnNormalSpan class='text-12'>{props.shareDetail.address || '无地址'}</CnNormalSpan>
              <CnBoldSpan class='text-12'>{props.shareDetail.beLongUser || '无所属人'}</CnBoldSpan>
            </div>
          </div>
        </div>

        <div
          class='absolute bottom-0 left-0 w-full h-52 flex justify-between items-center'
          style={{
            background: '#E4EAF5'
          }}
        >
          {props.shareDetail.isManage === '是'
            ? [
                <div
                  class='flex-1 flex justify-center items-center cursor-pointer'
                  onClick={openCheckShareModal}
                >
                  <IconImg imgName='check' class='w-24 h-24 mr-12'></IconImg>
                  <CnMediumSpan class='text-xText'>查看分享</CnMediumSpan>
                </div>,
                <SplitLine
                  class='py-14'
                  style={{
                    background: '#D2D5DB'
                  }}
                ></SplitLine>,
                <div
                  class='flex-1 flex justify-center items-center cursor-pointer'
                  onClick={openShareModal}
                >
                  <IconImg imgName='shareDevice-sm' class='w-24 h-24 mr-12'></IconImg>
                  <CnMediumSpan class='text-xText'>分享设备</CnMediumSpan>
                </div>
              ]
            : null}
        </div>

        <CFormModal class='w-400' v-model={[state.shareModalVisible, 'visible']}>
          {{
            title: () => (
              <div>
                <CnMediumSpan class='mr-14'>分享设备</CnMediumSpan>
                <CnNormalSpan>{props.shareDetail.devName}</CnNormalSpan>
              </div>
            ),
            default: (changeVisible: ChangeVisible) => (
              <ShareDevModalForm
                changeVisible={changeVisible}
                shareDetail={props.shareDetail}
                onFinish={() => emit('finish')}
              ></ShareDevModalForm>
            )
          }}
        </CFormModal>

        <CFormModal class='w-600' v-model={[state.checkShareModelVisible, 'visible']}>
          {{
            title: () => (
              <div>
                <CnMediumSpan class='mr-14'>查看分享成员</CnMediumSpan>
                <CnNormalSpan>{props.shareDetail.devName}</CnNormalSpan>
              </div>
            ),
            default: (changeVisible: ChangeVisible) => (
              <CheckShareDevModalForm
                changeVisible={changeVisible}
                shareDetail={props.shareDetail}
                onFinish={() => emit('finish')}
              ></CheckShareDevModalForm>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})
